<template>
    <div class="page">
        <div class="search-card">
            <el-form :inline="true">
                <el-form-item label="职位名称:">
                    <el-input placeholder="请输入要搜索的职位关键字" v-model="searchParams.name" style="width:300px;"/>
                </el-form-item>
            </el-form>
            <div>
                <el-button type="primary" @click="loadData">搜索</el-button>
                <el-button @click="dialogFormVisible = true">新增</el-button>
            </div>
        </div>
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column prop="id" width="80" label="ID"/>
            <el-table-column prop="empId" label="工号"/>
            <el-table-column prop="name" label="姓名"/>
            <el-table-column prop="idCardNumber" label="身份证"/>
            <el-table-column prop="type.name" label="类型"/>
            <el-table-column prop="job.name" label="职位"/>
            <el-table-column label="入职时间" width="200">
                <template slot-scope="data">
                    {{formatDate(data.row.createTime)}}
                </template>
            </el-table-column>
            <el-table-column label="更新时间" width="200">
                <template slot-scope="data">
                    {{formatDate(data.row.updateTime)}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="data">
                    <el-link type="primary" @click="detail(data.row)">详情</el-link>
                    <el-link class="ml-1" type="primary" @click="modify(data.row)">修改</el-link>
                    <el-popconfirm title="请确认是否删除此职位?" @confirm="remove(data.row)">
                        <el-link class="ml-1" slot="reference" type="primary">删除</el-link>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-block">
            <el-pagination
                :current-page="searchParams.page_no"
                :page-sizes="[2, 5, 10, 15]"
                :page-size="searchParams.page_size"
                layout="total, sizes, prev, pager, next, jumper"
                @current-change="setPage"
                :total="totalCount">
            </el-pagination>
        </div>
        <div class="dialog">
            <el-dialog title="请正确填写员工的基本信息" :visible.sync="dialogFormVisible" width="800px">
                <el-form :model="saveForm">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="员工编号">
                                <el-input v-model="saveForm.empId" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="员工姓名">
                                <el-input v-model="saveForm.name" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="身份证号码">
                                <el-input v-model="saveForm.idCardNumber" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="员工是否在职">
                                <el-select v-model="saveForm.empStatus" placeholder="请选择员工在职状态" class="w-100">
                                    <el-option label="在职" value="1"></el-option>
                                    <el-option label="实习" value="2"></el-option>
                                    <el-option label="离职" value="3"></el-option>
                                    <el-option label="辞退" value="4"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="员工类型">
                                <el-select v-model="saveForm.typeId" placeholder="请选择员工类型" class="w-100">
                                    <el-option label="普通员工" value="1"></el-option>
                                    <el-option label="部门经理" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="员工职位">
                                <el-select v-model="saveForm.jobId" placeholder="请选择员工职位" class="w-100">
                                    <el-option v-for="j in jobList" :key="j.id" :label="j.name"
                                               :value="j.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="专业">
                                <el-input v-model="saveForm.major" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="最高学历">
                                <el-autocomplete class="w-100"
                                                 v-model="saveForm.highDegree"
                                                 :fetch-suggestions="highDegreeList"
                                                 placeholder="请输入内容"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="create" :loading="saving">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</template>

<script>
import api from "@/services/api";
import StringTool from "@/util/StringTool";

export default {
    name: "Employee",
    data() {
        return {
            searchParams: {
                page_no: 1,
                page_size: 15,
                name: ''
            },
            // 保存数据的模型  - 最简单的就是java实体类的属性
            saveForm: {
                id:0,
                empId: '',
                name: '',
                idCardNumber: '',
                typeId: '',
                jobId: '',
                empStatus: '1',
                major: '',
                highDegree: ''
            },
            dialogFormVisible: false,
            saving:false,
            saveRules: {},
            totalCount: 0,
            tableData: [],
            jobList: [] // 所有的职位列表
        }
    },
    mounted() {
        this.loadData();
    },
    methods: {
        ...StringTool,
        highDegreeList(query, callback) {
            const _ = [], __ = ['博士', '硕士', '本科', '专科', '高中', '初中', '小学', '小学未毕业', '幼儿园', '文盲']
            __.forEach(value => _.push({value}))
            callback(_)
        },
        remove(data) {
            const id = data.id; // 获取到当前数据的id
            api.post("/job/update", {status: 0, id: id}).then(result => {
                // 保存成功 刷新数据
                this.loadData();
            }).catch(err => {
                this.$message(err.message)
            })
        },
        detail(data) {},
        modify(data) {
            const id = data.id, name = data.name; // 获取到当前数据的id和名称

            this.$prompt('请输入职位名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValue: name,
                inputValidator: function (value) {
                    return value != null && value.length != 0
                },
                inputErrorMessage: '职位名称不能为空'
            }).then(({value}) => {
                // 提交数据到后端
                api.post("/job/update", {name: value, id: id}).then(result => {
                    // 保存成功 刷新数据
                    this.loadData();
                }).catch(err => {
                    this.$message(err.message)
                })
            }).catch();
        },
        create() {
            this.saving= true;
            // 提交数据到后端
            api.post("/emp/save", this.saveForm).then(result => {
                this.dialogFormVisible = false;
                // 保存成功 刷新数据
                this.loadData();
            }).catch(err => {
                this.$message(err.message)
            }).finally(()=>{
                this.saving = false;
            })
        },
        setPage(page) {
            this.searchParams.page_no = page; // 设置查询的页码
            this.loadData(); // 重新查询数据
        },
        loadData() {

            api.get("/job/list", {page_size: 1000}).then(data => {
                this.jobList = data.records; // 数据列表
            })
            api.get("/emp/list", this.searchParams).then(data => {
                this.tableData = data.records; // 数据列表
                this.totalCount = data.total; // 总条数
            })
        }
    }
}
</script>

<style scoped>

</style>
